{layout name="/public/layout_index" /}

<style>
.is-right > .cell{
  display:inline;
}
.el-collapse-item__wrap {
    border-bottom: 0px;
    padding-top:30px;
}
.el-collapse-item__header {
    border-bottom: 0px solid #ebeef5;
    height: 28px;
    line-height: 28px;
}
.el-collapse-item__header.is-active {
    border-bottom: 1px solid #ebeef5;
    height: 48px;
    line-height: 48px;
}
.el-collapse-item__arrow {
  height: 30px;
  line-height: 30px;
}
.hover:hover{
  color:#1e88e5 !important;
}



</style>

<div id="app" v-cloak>

  <div class="card">
    <div class="card-body">
      <el-collapse v-model="activeNames" style="border-top:0px;border-bottom:0px;">
        <el-collapse-item name="1" >
          <template slot="title">
            <h3 class="card-title hover">查询条件</h3>

          </template>
            <el-form
              class="row"
              :model="form"
              label-width="90px"
              size="mini"
              @submit.native.prevent="return false">


              <el-form-item label="产品编码">
                <el-input
                  v-model="form.code"
                  @keyup.enter.native="Search"
                  placeholder="输入编码">
                </el-input>
              </el-form-item>



              <el-form-item class="col-12">
                <el-button class="btn-info waves-effect waves-light" size="medium" type="primary" @click="Search">查询</el-button>
              </el-form-item>
            </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>


  <c-card title="查询结果" v-show="result_show" v-loading="result_loading" footer="true">


    <template slot="footer">
        <el-button
          @click="Search"
          data-toggle="tooltip"
          title="刷新"
          class="btn-warning waves-effect waves-light"
          type="info"
          icon="el-icon-refresh"
          style="outline: none;"
          circle>
        </el-button>
        <el-button
          @click="goTop"
          data-toggle="tooltip"
          title="筛选"
          class="btn-success waves-effect waves-light"
          type="warning"
          icon="el-icon-search"
          style="outline: none;"
          circle>
        </el-button>


    </template>




        <el-table

          :data="list"
          style="width: 100%"
        >



        <el-table-column
          fixed="left"
          prop="store_name"
          label="库位"
          >
        </el-table-column>

        <el-table-column
          prop="goods_code"
          label="产品编码"
          >
        </el-table-column>

        <el-table-column
          prop="goods_name"
          label="产品名称"
          >
        </el-table-column>

        <el-table-column
          prop="num"
          label="数量"
          align="right"
          width="80">
        </el-table-column>


        </el-table>


  </c-card>


</div>



<script>
var mixin = {

};
var base_mixin={
  data:{
    apiBase:"{$apiBase}",
    activeNames:["1"],
    result_show:false,
    result_loading:true,
    storeList:[],
    form:{},
    list:[]

  },
  methods: {
    init(){

    },
    Search: function(){

      this.result_show=true;
      this.result_loading=true;

      var that=this;
      var postData={
        form: this.form,
      };
      APP.ajax(this.apiBase+"/getresult",postData,function(msg){
        that.result_loading=false;
        if (msg.result){
          that.activeNames=[];
          that.list=msg.data;
        }else{
          APP.alert(msg.data);
        }
      });
    },
    goTop:function(){
      this.activeNames=["1"];
      $("html,body").animate({scrollTop:0},1000);
    }

  },
  mounted(){
    var that=this;
    this.$nextTick(function () {
      that.init();
    })
  }
};
var main=new Vue({
  el:"#app",
  mixins: [base_mixin,mixin],

});

</script>
